import {React, useState} from 'react'
import * as PIXI from 'pixi.js'


import {Stage, Sprite, Container, AnimatedSprite} from '@inlet/react-pixi';

let xxx = 1
let yyy = 1


export function Ffff() {
    const [xxx, setXxx] = useState(1)
    const [xxxx, setXxxx] = useState(1)
    const [alpha, setAlpha] = useState(1)
    const [dragging, setDragging] = useState(false)
    const [mouselocation, setMouselocation] = useState([0, 0])
    const [mousex, setMousex] = useState(0)
    const [mousey, setMousey] = useState(0)


    function onClick() {
        setXxx(xxx * 2);
        setXxxx(xxxx + 10)
        yyy = 1
    }

    function onDragStart() {
        setDragging(true)
        setAlpha(0.5)
    }

    function onDragEnd() {
        setDragging(false)
        setAlpha(1)

    }

    const App = () => (
        <div>{PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST}
            <Stage
            pointermove={(e) => {
                                //setMousex(e.screenX)
                                //setMousey(e.screenY)
                                //setMouselocation([e.screenX, e.screenY]);
                                console.log('pointermove')
                                console.log(e.data.clientY)
                                console.log(e.clientY)

                            }
                        }

            >
                <Sprite image="./logo192.png"
                        x={mousex}
                        y={mousey}
                        interactive={true}
                        buttonMode={true}
                        scale={{x: xxx, y: yyy}}
                        anchor={0.5}
                        pointerdown={(e) => {
                            onDragStart();
                            console.log('pointerdown')
                        }}
                        pointerup={(e) => {
                            onDragEnd();
                            console.log('pointerup')

                        }}
                        pointerupoutside={(e) => {
                            onDragEnd();
                            console.log('pointerupoutside')

                        }}

                        pointermove={(e) => {
                            if (dragging) {
                                //setMousex(e.screenX)
                                //setMousey(e.screenY)
                                //setMouselocation([e.screenX, e.screenY]);
                                console.log('pointermove')
                                console.log(e.clientY)

                            }
                        }}
                        alpha={alpha}


                />

            </Stage>

        </div>

    );


    return <div>{App()}</div>
}

export default function MainPage() {
    return <div>显示一个内容
        {
            Ffff()
        }


    </div>
}